<template>
  <el-dialog :title=" $t('report.orderInquiry') " v-model="visible"
             :close-on-click-modal="false" draggable>

        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList" style="margin-top: 15px">

          <el-form-item :label="$t('report.stockBatch')" prop="stockBatch" >
            <el-input v-model="state.queryForm.stockBatch" clearable :placeholder="$t('report.stockBatch')"/>
          </el-form-item>
          <el-form-item :label="$t('wms.materialCode')" prop="materialCode" >
            <el-input v-model="state.queryForm.materialCode" clearable :placeholder="$t('wms.materialCode')"/>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary"  @click="getDataList">{{$t('btn.search')}}</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="state.dataList" v-loading="state.loading" border
                  :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
                  @selection-change="selectionChangHandle" style="width: 100%;height: 100%;"
                  @sort-change="sortChangeHandle">
          <el-table-column prop="soCode" :label="$t('report.orderNumber')" show-overflow-tooltip/>
          <el-table-column prop="materialCode" :label="$t('mes.finishedMateriarcode')" show-overflow-tooltip/>
          <el-table-column prop="materialName" :label="$t('mes.finishedMaterialName')" show-overflow-tooltip/>
          <el-table-column prop="materialSpec" :label="$t('report.finishedMaterialSpec')" show-overflow-tooltip/>
          <el-table-column prop="customerModel" :label="$t('mes.customerModel')" show-overflow-tooltip/>
          <el-table-column prop="deliveryDate" :label="$t('report.dateOfIssuance')" show-overflow-tooltip/>
        </el-table>
  </el-dialog>
</template>

<script setup lang="ts" name="QmsProductionCheckDialog">

import {BasicTableProps, useTable} from "/@/hooks/table";
import {getSocodeByStockBatchAndMaterialCode} from "/@/api/platform/mes/mesForwardTrace";

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: getSocodeByStockBatchAndMaterialCode,
  isPage: false
})

//  table hook
const {
  getDataList,
  sortChangeHandle,
  tableStyle
} = useTable(state)



const visible = ref(false)




// 打开弹窗
const openDialog = () => {
  visible.value = true
};

// 暴露变量
defineExpose({
  openDialog
});
</script>